import React, { useEffect, useState } from 'react';
import './index.less'
import { Button, Card, Col, DatePicker, Row, Space, Spin } from 'antd';
import { useRequest } from 'ahooks';
import { calendarGenerate } from '@/service/internal';
import moment from 'moment';
const SuitableIcon = () => {
  return <span className='suitable1 border'>
    <span className='suitable2 bg border'>
      宜
    </span>
  </span>
}
const AvoidIcon = () => {
  return <span className='avoid1 border'>
    <span className='avoid2 color border'>
      忌
    </span>
  </span>
}
const Icon2 = () => <svg className="icon" viewBox="0 0 1165 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3429" id="mx_n_1685612767537"><path d="M0.000556 865.83469a66.118285 66.118285 0 0 0 65.93308 65.93308 69.08157 69.08157 0 0 0 39.63393-12.593959 222.246337 222.246337 0 0 0 111.123169 49.44981l26.113945 4.444927a232.247423 232.247423 0 0 0-5.370953 47.968168v2.222463h383.189726v-31.299693a123.717128 123.717128 0 0 0-62.043769-50.746247h-98.158799l-21.669018-15.927654 200.762525-50.931452 11.297522 17.594501 30.373666 79.823477 17.224092 52.227889H907.506434v-32.596129a144.83053 144.83053 0 0 0-38.893109-27.780793l-24.076687-11.667932-40.745161-62.969796v-112.790016a1069.375294 1069.375294 0 0 0 126.495207-140.015193l8.334237-0.926026 188.724182-49.635016h0.926026l36.11503-55.561584v-34.448182l-88.528124-97.417978a257.620546 257.620546 0 0 0-84.824019-61.117743l-13.519986-49.820221L944.54749 157.980105l-29.632845-67.414722L825.460495 10.556701A45.745704 45.745704 0 0 0 777.862737 3.889311a44.819678 44.819678 0 0 0-17.409296 13.33478l-7.408211-6.66739a46.30132 46.30132 0 0 0-74.082113 43.708446l60.376922 190.76144 72.785675 64.821849 12.96437 34.448182a371.706999 371.706999 0 0 0-58.710074 68.711159l-7.778622 11.482728-560.245976 107.048652a222.246337 222.246337 0 0 0-166.684753 267.066016c0 3.14849 1.666848 6.29698 2.592874 9.445469A65.377464 65.377464 0 0 0 0.000556 865.83469z" p-id="3430"></path></svg>
const OldYellowCalendar = () => {
  const { data = {},loading, run } = useRequest<any>(calendarGenerate, { manual: true })
  // const data = {
  //   today: '04',
  //   week: '星期五',
  //   monthSize: '九月大',
  //   time: '公历2023年06月02日',
  //   constellation: '双子座(阳历)',
  //   lunarCalendar: '农历二〇二三年四月十五日(阴历)',
  //   note: '2023年农历总共有384天，今年已过131天，还剩253天',
  //   suitable: ['祭祀', '祭祀', '祭祀', '祭祀', '祭祀', '祭祀', '祭祀', '祭祀', '祭祀', '祭祀', '祭祀'],
  //   avoid: ['祭祀', '祭祀', '祭祀', '祭祀', '祭祀', '祭祀', '祭祀', '祭祀', '祭祀', '祭祀', '祭祀'],
  // }
  const [value, setValue] = useState(moment());
  const onChange = (val) => {
    setValue(val)
    console.log(val)
  }
  const onSave = () => {
    run({
      date: value.format('YYYY/MM/DD')
    })
  }
  useEffect(()=>{
    onSave()
  },[])
  return (<Card >
    <Spin spinning={loading}>
    <Space>
      <DatePicker value={value} onChange={onChange} />
      <Button type='primary' onClick={onSave}>生成</Button>
    </Space>

    <div className={`old-yellow-calendar ${['星期日','星期六'].includes(data.week)?'red':'green'}`}>
      <h2 className='bg title' >老黄历</h2>
      <div className='color banner1'>
        <Row>
          <Col className='center' flex='auto'><span>{data.horoscope1}</span></Col>
          <Col className='center' flex='auto'><span>{data.horoscope2}</span></Col>
          <Col className='center' flex='auto'><span>{data.horoscope3}</span></Col>
        </Row>



      </div>
      <div>
        <div className='color today'>{data.today}</div>
      </div>
      <div className='color banner2'>
        {data.lunarCalendar}
      </div>

      <div className='line border'></div>
      <div className='yiji-header bg '>
        <Row>
          <Col flex='auto'>{data.week}</Col>
          <Col flex='50px'>
            <div className='animals-icon border'>
              <Icon2 />
            </div>
          </Col>
          <Col flex='auto'>{data.constellation}</Col>
        </Row>
      </div>
      <div className=''>
        <Row className='border yiji-box' wrap={false}>
          <Col flex='60px'><SuitableIcon /></Col>
          <Col flex='auto'>
            {data.suitable?.map(item => {
              return <div className='yiji-text color' key={item}>{item}</div>
            })}
          </Col>
        </Row>
        <Row className='border yiji-box' wrap={false}>
          <Col flex='60px'><AvoidIcon /></Col>
          <Col>  {data.avoid?.map(item => {
            return <div className='yiji-text color' key={item}>{item}</div>
          })}</Col>
        </Row>
      </div>
      <div className='note color'>
        {data.note}
      </div>
    </div>
    </Spin>
  </Card>)
}
export default OldYellowCalendar